<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>pixi learn 1</title>
  <style>
    body {
      margin: 0;
    }
    canvas {
      display: block;
      background: blue;
    }
  </style>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script src="../lib/pixi.js"></script>
<script type="text/javascript">
  const canvas = document.getElementById('mycanvas')
  let _w = window.innerWidth
  let _h = window.innerHeight
  const renderer = new PIXI.Renderer({
    view: canvas,
    width: _w,
    height: _h,
    resolution: window.devicePixelRatio,
    autoDensity: true
  })
  window.addEventListener('resize', resize)
  function resize() {
    _w = window.innerWidth
    _h = window.innerHeight
    renderer.resize(_w, _h)
  }
  const stage = new PIXI.Container()

  const texture = PIXI.Texture.from('../assets/24-pineapple-fruit-png-image.png')
  // const texture = PIXI.Texture.from('../assets/bunny.png')
  const img = new PIXI.Sprite(texture)
  img.anchor.x = 0.5
  img.anchor.y = 0.5
  img.scale.x = 0.2
  img.scale.y = 0.2
  stage.addChild(img)

  const ticker = new PIXI.Ticker()
  ticker.add(animate)
  ticker.start()
  img.x = renderer.screen.width / 2
  img.y = renderer.screen.height / 2
  function animate() {
    img.rotation += 0.01
    renderer.render(stage)
  }

</script>
</body>
</html>
